﻿<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" />
    <meta charset="UTF-8" />
    <title>SCHS Web Design</title>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="js/bootstrap.js"></script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link href="css/bootstrap.css" rel="stylesheet" />
    <link rel="stylesheet" href="css/font-awesome.css" />
    <link rel="stylesheet" type="text/css" href="fullcalendar/fullcalendar.css" />
    <link rel="stylesheet" type="text/css" href="fullcalendar/fullcalendar.print.css" media="print" />
    <link rel="stylesheet" href="css/main-style.css" />
    <!--<script type="text/javascript" src="jquery/jquery-ui-1.8.23.custom.min.js"></script>-->
    <link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css' />
    <script type="text/javascript" src="fullcalendar/fullcalendar.min.js"></script>
    <script type="text/javascript" src="fullcalendar/gcal.js"></script>
    <script type="text/javascript" src="js/jquery.quovolver.js"></script>
    <script type="text/javascript" src="js/main.js"></script>
  </head>
  <body>
    <div class="fixed-footer container-fluid">
      <div class="row-fluid">
        <div class="span12" style="position:relative">
          <div style="position:absolute;right:0;top:0;font-size:25px;">
            <a class="greylink" id="dismiss" href="">&times;</a>
          </div>
          <h1>
          <i class="icon-warning-sign"></i> excuse the mess 
          <small>site redesign in progress</small></h1>
          <div class="progress progress-striped active">
            <div class="bar" style="width: 40%;"></div>
          </div>
          <h4 style="color:rgb(100,100,100);">
          <i class="icon-magic"></i> there's some major magic happening around here...</h4>
        </div>
      </div>
    </div>
    <div class="navbar navbar-fixed-top navbar-inverse">
      <div class="navbar-inner">
        <div class="container-fluid">
          <div class="row-fluid">
            <div class="span10 offset1">
            <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span> 
            <span class="icon-bar"></span></a> 
            <a class="brand" href="index.html" style="font-weight:bold;font-family:'Droid Sans'">SCHS Web Design</a>
            <div class="nav-collapse collapse">
              <ul class="nav">
                <li class="active">
                  <a href="index.html">
                  <span class="icon-home"></span> Home</a>
                </li>
                <li>
                  <a href="resources.html">
                  <span class="icon-list"></span> Resources</a>
                </li>
                <li>
                  <a href="http://code.google.com/p/schs-site/source/list">
                  <span class="icon-tasks"></span> Changelog</a>
                </li>
                <li>
                  <a href="">
                  <i class="icon-group"></i> About</a>
                </li>
                <li>
                  <a href="">
                  <i class="icon-group"></i> Blog</a>
                </li>
              </ul>
            </div>
            <!--  <ul class="nav nav-collapse collapse pull-right">
                        <li class="dropdown">
                           <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                           Account
                           <b class="caret"></b>
                           </a>
                           <ul class="dropdown-menu">
                              <li><a>Login</a></li>
                              <li><a>Account Info</a></li>
                           </ul>
                        </li>--></div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid" style="background-image:url('img/navy_blue.png');box-shadow: inset 0 -15px 15px -15px #000;">
      <div class="row-fluid">
        <div class="span10 offset1 logo" style="position:relative;">
          <!--http://puu.sh/1d4Qv-->
          <img class="img-rounded" style="display:inline;height:200px; margin:auto;" alt="The Web Design Club" src="img/logo.png" />
        </div>
      </div>
    </div>
    <div class="container-fluid" style="background-color:#3A3A3A;box-shadow: inset 0 -15px 15px -15px #111;">
      <div class="row-fluid">
        <div class="span10 offset1 carousel-wrapper">
          <div id="myCarousel" class="carousel slide">
          <!-- Carousel items -->
          <div class="carousel-inner">
          </div>
          <!-- Carousel nav -->
          <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a> 
          <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a></div>
        </div>
      </div>
    </div>
    <div class="container-fluid content">
      <div class="row-fluid">
        <div class="span10 offset1" id="content-box">
          <br />
          <div class="row-fluid">
            <div class="span4" style="position:relative;">
              <h2 class="banner visible-desktop">
              <i class="icon-star"></i> About Us</h2>
              <div class="dsktop">
                <div class="box box-red">
                  <div class="box-inner">
                    <h2 class="hidden-desktop">About Us</h2>
                    <div class="abt">
                      <p>We are a small yet elite club at the prestigious 
                      <a href="http://sctritons.schoolloop.com">San Clemente High School</a> that strive to use cutting edge web technologies such as HTML5 and CSS3 in order to design beautiful websites.</p>
                      <p>Heavy emphasis is placed on mobile first responsive design and progressive enhancement; our members are screened and handpicked through our rigorous and stringent interview process.</p>
                    </div>
                    <br />
                    <div style="text-align:center;">
                    <a href="" class="btn btn-danger btn-box">
                    <span class="icon-download-alt"></span> MORE INFO</a></div>
                    <br />
                  </div>
                </div>
              </div>
              <div class="box box-inner box-red">
              <h4>
              <i class="icon-exclamation-sign"></i> Want a 
              <i>free</i> website designed?</h4>Drop us a line! We'll get in contact if you qualify.
              <br />
              <br />
              <form>
                <fieldset>
                <input type="text" placeholder="Name of organization..." style="width:100%; padding-left:5px; padding-right:0;" /> 
                <input type="text" placeholder="Email..." style="width:100%; padding-left:5px; padding-right:0;" /> 
                <span class="help-block"></span> 
                <textarea rows="3" placeholder="Description of desired design..." style="width:100%; padding-left:5px; padding-right:0;"></textarea> 
                <label class="checkbox">
                <input type="checkbox" /> I'm willing to pay $$$ :) lots of it!!!</label>
                <div style="text-align:center;">
                  <button type="submit" class="btn btn-box btn-danger">Submit</button>
                </div></fieldset>
              </form></div>
              <div class="box box-inner box-red sm">
                <h4>
                <i class="icon-globe"></i> social media 
                <small>connect with us</small></h4>
                <div class="row-fluid" style="text-align:center;">
                  <div class="span3 socialmedia">
                    <div class="icon-row" style="">
                    <a class="btn btn-danger" style="width:10px;">
                      <i class="icon-google-plus"></i>
                    </a> 
                    <a class="btn btn-info" style="width:10px;">
                      <i class="icon-twitter" style="position:relative;left:-1px;"></i>
                    </a></div>
                    <div class="icon-row">
                    <a class="btn btn-primary" style="width:10px;">
                      <i class="icon-facebook"></i>
                    </a> 
                    <a class="btn btn-success" style="width:10px;">
                      <i class="icon-github" style="position:relative;left:-1px;"></i>
                    </a></div>
                  </div>
                  <div class="span9">
                    <blockquote>
                      <p>SCHS Web Design is great. They gave my site a make over and everything I could possibly ask for! I feel like my site has a breath of new life now; I highly endorse their service.</p>
                      <cite class="muted">&ndash; John Doe</cite>
                    </blockquote>
                    <blockquote>
                      <p>They're like wizards!</p>
                      <cite class="muted">&ndash; Harry Potter</cite>
                    </blockquote>
                    <blockquote>
                      <p>Pick these guys. You won't be disappointed.</p>
                      <cite class="muted">&ndash; John Smith</cite>
                    </blockquote>
                    <blockquote>
                      <p>The staff was very friendly and helpful. Any questions I had were resolved within 3 minutes! Their customer support is top-notch and very efficient; I wish all design firms had such excellent service.</p>
                      <cite class="muted">&ndash; Smith John</cite>
                    </blockquote>
                  </div>
                </div>
              </div>
            </div>
            <div class="span8">
              <div class="box box-inner box-blue" style="/*padding:20px;box-shadow:0px 0px 15px #666;font-size:14px;line-height:20px;*/">
                <h2 style="border-bottom:1px solid #ccc;padding-bottom:15px;">
                <i class="icon-group"></i> Our Clients 
                <small>just a small sample</small></h2>
                <div class="innerbox" style="background-color:white;">
                  <h4 style="font-family:'Droid Sans'">MR. YOUNG</h4>
                  <hr />
                  <div class="row-fluid">
                    <div class="span4">
                      <div id="myCarousel2" class="carousel slide" style="">
                      <!-- Carousel items -->
                      <div class="carousel-inner">
                        <div class="active item">
                          <img class="img-polaroid" src="http://i.imm.io/MJ6q.png" alt="old young site" />
                          <div class="carousel-caption">
                            <h4>Before</h4>
                          </div>
                        </div>
                        <div class="item">
                          <a href="http://ulse.net/y">
                            <img class="img-polaroid" src="http://ulse.net/y/wp-content/themes/blankslate/screenshot.png" alt="mr young's site" />
                          </a>
                          <div class="carousel-caption">
                            <h4>After</h4>
                          </div>
                        </div>
                      </div>
                      <!-- Carousel nav -->
                      <a class="carousel-control left" href="#myCarousel2" data-slide="prev">&lsaquo;</a> 
                      <a class="carousel-control right" href="#myCarousel2" data-slide="next">&rsaquo;</a></div>
                    </div>
                    <div class="span8">
                      <p>Mr. Young had a site from the 90's. We had a vision. This was the spectacular mind blowing result.</p>
                      <p>Opting to use wordpress to provide an easy to use CMS, we fused it with bootstrap and made a very custom theme.</p>
                      <p>Additional technologies used include font awesome and subtle patterns.</p>
                    </div>
                  </div>
                </div>
                <div class="innerbox" style="background-color:white;">
                  <h4 style="font-family:'Droid Sans'">THIS WEBSITE</h4>
                  <hr />
                  <div class="row-fluid">
                    <div class="span4">
                      <div id="myCarousel3" class="carousel slide" style="">
                      <!-- Carousel items -->
                      <div class="carousel-inner">
                        <div class="active item">
                          <img class="img-polaroid" src="http://placehold.it/300x225" />
                          <div class="carousel-caption">
                            <h4>Before</h4>
                          </div>
                        </div>
                        <div class="item">
                          <a href="http://ulse.net/y">
                            <img class="img-polaroid" src="http://placehold.it/300x225/eeeeee" alt="mr young's site" />
                          </a>
                          <div class="carousel-caption">
                            <h4>After</h4>
                          </div>
                        </div>
                      </div>
                      <!-- Carousel nav -->
                      <a class="carousel-control left" href="#myCarousel3" data-slide="prev">&lsaquo;</a> 
                      <a class="carousel-control right" href="#myCarousel3" data-slide="next">&rsaquo;</a></div>
                    </div>
                    <div class="span8">
                      <p>This website was the result of hard labor, sweat, blood, and tears.</p>
                      <p>I should make this a real wordpress site or w/e.</p>
                      <p>I really need to move off bootstrap =\ some stuff to "unbootstrapify" &ndash; <a href="http://www.bootstraphero.com/the-big-badass-list-of-twitter-bootstrap-resources">some resources</a>, <a href="http://bootswatch.com">bootswatch</a>, <a href="http://builtwithbootstrap.com/">built with bootstrap</a>, <a href="https://wrapbootstrap.com/?ref=bsw">wrapbootstrap</a></p>
					  
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
                  </div>
      </div>
    </div>
	<div class="container-fluid content plans">
            <div class="row-fluid pricing" style="text-align:center;">
				<div class="span10 offset1" id="content-box">              
                <div class="box-inner">
                  <h1>Pricing & Plans</h1>
                  <div id="pricing-grid" class="buffer">
                    <div class="row-fluid">
                      <div class="span4">
                        <div class="box box-green">
                          <div class="box-inner">
                            <h3>Basic</h3>
                            <ul class="feature-list">
                              <li>1 user</li>
                              <li>1 website</li>
                              <li>1 GB Storage</li>
                              <li>Unlimited Bandwidth</li>
                              <li>Free Setup</li>
                              <li>Ideal personal portfolio</li>
                              <li>$9.99/month</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="span4">
                        <div class="box box-red featured">
                          <div class="best-value">Best
                          <br />Value</div>
                          <div class="box-inner">
                            <h3>Plus</h3>
                            <ul class="feature-list">
                              <li>5 users</li>
                              <li>2 websites</li>
                              <li>5 GB Storage</li>
                              <li>Unlimited Bandwidth</li>
                              <li>Free Setup</li>
                              <li>Great for small businesses</li>
                              <li>$14.99/month</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                      <div class="span4">
                        <div class="box box-blue">
                          <div class="box-inner">
                            <h3>Pro</h3>
                            <ul class="feature-list">
                              <li>20 users</li>
                              <li>5 websites</li>
                              <li>1 year commercial support</li>
                              <li>10 GB Storage</li>
                              <li>Unlimited Bandwidth</li>
                              <li>Dedicated support!</li>
                              <li>$24.99/month</li>
                            </ul>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
	 <div class="container-fluid content content-main">
      <div class="row-fluid">
        <div class="span10 offset1" id="content-box">
          <div class="row-fluid buffer">
            <h2>
            <i class="icon-calendar"></i> Calendar</h2>
            <div id="calendar" class="box box-inner box-red"></div>
            <div class="visible-phone box box-blue">
              <div class="box-inner calendar-box">
                <h3>View the Calendar</h3>
                <a href="https://www.google.com/calendar/embed?src=MGQ0M3FiMnV1NHF2MGd2dGlkdjdnMnJldm9AZ3JvdXAuY2FsZW5kYXIuZ29vZ2xlLmNvbQ" class="btn btn-info btn-box">Go</a>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="container-fluid footer" style="background-image:url('img/stressed_linen.png');">
      <div class="row-fluid" style="margin-top:20px;">
        <div class="span10 offset1" style="height:100px;color:#aaa">
        <a class="btn btn-danger" style="width:10px;">
          <i class="icon-google-plus"></i>
        </a> 
        <a class="btn btn-info" style="width:10px;">
          <i class="icon-twitter" style="position:relative;left:-1px;"></i>
        </a> 
        <a class="btn btn-primary" style="width:10px;">
          <i class="icon-facebook"></i>
        </a> 
        <a class="btn btn-success" style="width:10px;">
          <i class="icon-github" style="position:relative;left:-1px;"></i>
        </a>
        <div style="margin-top:20px;">&copy; The SCHS Web Design Club 2012 | All rights reserved | Created with Bootstrap and FullCalendar</div></div>
      </div>
    </div>
  </body>
</html>
